<template>
  <div class="select-date-box">
    <a-select
    :key="defaultYear"
    :default-value="defaultYear"
    placeholder="请选择年份"
    @change="handleChange"
    :options="yearOptions"
    :dropdownStyle="optionStyle"
    :getPopupContainer="
    triggerNode => {
        return triggerNode.parentNode || document.body
    }
    "
    >
       <a-icon slot="suffixIcon" type="caret-down" />
    </a-select>
  </div>
</template>
<script>
export default {
  props: {
    yearOptions:{
      type:Array
    },
    defaultYear:{
      type:Number
    }
  },
  data() {
    return {
        optionStyle: {
        backgroundColor: 'rgba(11, 17, 51, 0.85)'
        }
    }
  },
  watch: {
    yearOptions:{
        immediate: true,
        handler: function(val) {
            if(val){
              
            }
        }
    },
    defaultYear:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
    },
  created(){
  },
  methods: {
     handleChange(value) {
      this.$emit('getYear', value)
    }
  },
}
</script>
<style lang="less" scoped>
 .select-date-box {
        position: relative;
        margin-left: 10px;
        /deep/ .ant-select-selection--single{
          box-shadow: none;
        }
        /deep/ .ant-empty-small .ant-empty-image{
          margin-left: -10px;
        }
        /deep/ .ant-select-selection{
            border-radius: 14px;
          border: 1px solid;
          border-color: rgba(255, 255, 255, 0.12);
        }
        /deep/ .ant-select-dropdown {
          left: 0% !important;
          top: 40px !important;
          .ant-select-dropdown-menu-item {
            color: #eaeaea;
          }
          .ant-select-dropdown-menu-item-selected {
            background-color: rgba(13, 153, 194, 1);
          }
          .ant-select-dropdown-menu-item-active {
            background-color: rgba(13, 153, 194, 1);
          }
        }
        /deep/.ant-select-selection:hover {
              border-radius: 14px;
              border: 1px solid;
              border-color: rgba(255, 255, 255, 0.12);
        }
        ::v-deep .ant-select {
          width: 69px;
          height: 28px;
          line-height: 28px;
          border:none;
          font-size: 12px;
          .ant-select-selection {
            background: transparent;
          }
          .ant-select-selection-selected-value {
             font-size: 12px;
            color: #fff;
          }
          .ant-select-arrow-icon {
            color: #fff;
          }
        }
      }
</style>